<template>
  <div class="breadcrumb" id="main-content-bread">
    <el-icon class="icon" @click="flodStore.toggleFold()">
      <Expand v-if="flodStore.isFold" />
      <Fold v-else />
    </el-icon>
    <el-breadcrumb separator="/">
      <template v-for="(item, index) in breadStore.breadcrumbList" :key="index">
        <el-breadcrumb-item v-if="item.title" :to="{ path: item.path, query: item.query }">
          {{ item.title }}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { useFoldStore } from '@/stores/foldMenu.js';
import { useBreadStore } from '@/stores/breadcrumb.js';

const flodStore = useFoldStore();
const breadStore = useBreadStore();
</script>

<style lang="scss" scoped>
.breadcrumb {
  display: flex;
  align-items: center;
  background-color: var(--bg-color1);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  user-select: none;

  .icon {
    margin-right: 5px;
    cursor: pointer;
  }
}
</style>
